<template>
    <view class="hire-detail">
        <view class="title">
            <view class="title-img">
                <image v-if="data.thumb != null && data.thumb != ''" :src="data.thumb"></image>
            </view>
            <view class="title-s">
                <view class="title-title">
                    {{ data.companyname }}
                </view>
                <view class="title-info">
                    <view class="ti-left">
                        {{ data.jobtitle }}
                    </view>
                    <view class="ti-right">
                        {{ data.worktype }}
                    </view>
                </view>
            </view>
        </view>
        <!-- 基本信息 -->
        <view class="base-info">
            <view class="title-base">
                <view class="online"></view>
                <view class="text">
                    基本信息
                </view>
            </view>
            <view class="content">
                <view class="content-f">
                    <view class="content-f-l">
                        公司行业
                    </view>
                    <view class="content-f-r">
                        {{ data.jobcate }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        薪资待遇
                    </view>
                    <view class="content-f-r">
                        {{ data.salary }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        招聘人数
                    </view>
                    <view class="content-f-r">
                        {{ data.isrecommand }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        年龄要求
                    </view>
                    <view class="content-f-r">
                        {{ data.age }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        学历要求
                    </view>
                    <view class="content-f-r">
                        {{ data.education }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        经验
                    </view>
                    <view class="content-f-r">
                        {{ data.express }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        性别要求
                    </view>
                    <view class="content-f-r">
                        {{ data.sex }}
                    </view>
                </view>
                <view class="content-f">
                    <view class="content-f-l">
                        福利待遇
                    </view>
                    <view class="content-f-r">
                        {{ data.special }}
                    </view>
                </view>
            </view>
        </view>
        <!-- 信息详情 -->
        <view class="campus-post">
            <view class="title-base">
                <view class="online"></view>
                <view class="text">
                    职位详情
                </view>
            </view>
            <view class="campus-post-info" v-html="data.content">
            </view>
        </view>
        <!-- 信息详情 -->
        <view class="share-info">
            <view class="share-info-r" @click="submitResume(data.id,data.companyname)">
                报名
            </view>
        </view>
    </view>
</template>

<script>
import newsApi from "@/common/api/news.js"
export default {
    data() {
        return {
            id: '',
            data: {}
        }
    },
    computed: {},
    onLoad(params) {
        console.log('params', params);
        this.id = params.id
        this.getDetail()
    },
    onShow() {
        const token = uni.getStorageSync('token')
		const user = uni.getStorageSync('user')
		if (!token && !user) {
			uni.showToast({
				title: "请先登录",
				icon: "none",
			});
			setTimeout(() => {
				this.utils.goto('/pages/index/index')
			}, 1500);
		}
    },
    //页面销毁生命周期
    onUnload() {

    },
    onPullDownRefresh() {

    },
    onReachBottom() {

    },
    methods: {
        // 获取详情数据
        getDetail() {
            const data = {
                id:this.id
            }
            newsApi.jobDetail(this, data).then(res => {
                if (res.code == 1) {
                    this.data = res.data
                }
            })
        },
        // 报名
        submitResume(id,companyname){
            this.utils.goto(`/pages/consult/message?id=${id}&companyname=${companyname}`)
        },
    }
}
</script>

<style lang="scss" scoped>
.hire-detail {
    .title {
        padding: 28rpx 0 28rpx 28rpx;
        background: #FFFFFF;
        display: flex;
        align-items: center;

        .title-img {
            image {
                width: 120rpx;
                height: 120rpx;
            }
        }

        .title-s {
            margin-left: 40rpx;

            .title-title {
                color: #000000;
                font-size: 30rpx;
                font-size: 500;
                margin-bottom: 28rpx;
            }

            .title-info {
                color: #999999;
                font-size: 24rpx;

                display: flex;
                align-items: center;

                .ti-left {
                    background: #F4F5F7;
                    padding: 4rpx 16rpx;
                    border-radius: 8rpx;
                }

                .ti-right {
                    background: #F4F5F7;
                    padding: 4rpx 16rpx;
                    border-radius: 8rpx;
                    margin-left: 24rpx;
                }
            }
        }
    }

    .base-info {
        margin-top: 28rpx;
        padding: 40rpx 28rpx 30rpx 28rpx;
        background: #FFFFFF;

        .title-base {
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;

            .online {
                width: 8rpx;
                height: 32rpx;
                border-radius: 52rpx;
                background: #5677fc;
            }

            .text {
                color: #333333;
                font-size: 30rpx;
                font-weight: bold;
                margin-left: 16rpx;
            }
        }

        .content {
            padding: 20rpx;
            background: #F8F8F8;

            .content-f:first-child {
                margin-top: 0;
            }

            .content-f {
                display: flex;
                align-items: center;
                margin-top: 40rpx;
                font-size: 28rpx;

                .content-f-l {
                    min-width: 156rpx;
                    color: #999999;
                    margin-right: 40rpx;
                }

                .content-f-r {
                    color: #333333;
                }
            }
        }
    }

    .campus-post {
        margin-top: 28rpx;
        padding: 40rpx 28rpx 30rpx 28rpx;
        background: #FFFFFF;

        .title-base {
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;

            .online {
                width: 8rpx;
                height: 32rpx;
                border-radius: 52rpx;
                background: #5677fc;
            }

            .text {
                color: #333333;
                font-size: 30rpx;
                font-weight: bold;
                margin-left: 16rpx;
            }
        }

        .label {
            margin-top: 28rpx;
            display: flex;
            align-items: center;

            .label-text {
                padding: 10px 20px;
                background-color: #F8F8F8;
                border-radius: 12rpx;
                font-size: 26rpx;
                color: #666666;
                display: inline-block;
                margin-left: 24rpx;
            }

            .label-text:first-child {
                margin-left: 0;
            }
        }

        .campus-post-info {
            margin-top: 32rpx;
            font-size: 28rpx;
            color: #333333;
        }
    }

    .share-info {
        margin-top: 42rpx;
        padding: 20rpx 0rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;

        .share-info-r {
            width: 50%;
            padding: 20rpx 0rpx;
            background: #5677fc;
            color: #FFFFFF;
            border-radius: 164rpx;
            text-align: center;
        }
    }
}
</style>